<template>
  <div class="menu-container">
    <el-container>
      <!-- 菜单树图 -->
      <el-aside class="menu" width="300px">
        <MenuTree ref="menuTreeRef" :menuInfo="menuInfo" @nodeClick="nodeClick" @addChildMenu="addChildMenu" @addMenu="resetMenuInfo" />
      </el-aside>

      <!--菜单内容 -->
      <el-main class="content">
        <MenuInfo :menuInfo="menuInfo" @refresh="menuTreeRef.getMenuList()" />
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
  import { DataUtil } from '@/utils/data-util.js';
  import MenuInfo from './components/MenuInfo.vue';
  import MenuTree from './components/MenuTree.vue';

  const defaultMenuInfo = {
    menuId: null,
    path: '',
    name: '',
    component: '',
    redirect: null,
    icon: '',
    title: '',
    orderNo: 0,
    parentId: 0,
    menuType: '1',
    hidden: false,
    isAffix: false,
    isAuth: false,
    isShortcut: false,
    remark: '',
  };
  const menuTreeRef = ref();

  let menuInfo = ref(DataUtil.deepCopy(defaultMenuInfo));

  /**
   * 重置menuInfo
   */
  const resetMenuInfo = () => {
    menuInfo.value = DataUtil.deepCopy(defaultMenuInfo);
  };

  /**
   * 点击节点
   * @param data 菜单信息
   */
  const nodeClick = (data) => {
    menuInfo.value = data;
  };

  /**
   * 添加子菜单
   * @param parentId 父级菜单id
   */
  const addChildMenu = (parentId) => {
    resetMenuInfo();
    menuInfo.value.parentId = parentId;
  };
</script>

<style lang="scss" scoped>
  .menu-container {
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

    .el-container {
      background: white;
      border-radius: 10px;
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
      overflow: hidden;
      transition: all 0.3s ease;

      &:hover {
        box-shadow: 0 12px 20px rgba(0, 0, 0, 0.1);
      }
    }

    .menu {
      background-color: #f9fafb;
      border-right: 1px solid rgba(0, 0, 0, 0.06);
      min-width: 280px;
      max-width: 420px;
    }

    .content {
      padding: 24px;
      background-color: white;
    }
  }

  // Responsive design
  @media screen and (max-width: 768px) {
    .menu-container {
      .el-container {
        flex-direction: column;
      }

      .menu {
        width: 100%;
        max-width: 100%;
      }
    }
  }
</style>
@/utils/data-util